<template>
  <div class="container">
    <!-- Content Area -->
    <div class="phb-content">
      <div class="phb-con-bj">
        <div class="phb-con-title">
          <h2>学院论文数量排行榜</h2>
        </div>
        <div class="phb-con-ul">
          <ul>
            <li v-for="(college, index) in paperRankings" :key="index" :class="{ 'top-three': index < 3 }">
              <div style="display: flex; justify-content:space-between;">
                <div>
                  <span class="icon">🎓</span>
                  {{ index + 1 }}. {{ college.name }}: {{ college.papers }} 篇
                </div>
                <div>
                  2024-11-10 01:06
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="phb-con-right">
        <div class="phb-con-title">
          <h2>学院获奖荣誉排行榜</h2>
        </div>
        <div class="phb-con-ul">
          <ul>
            <li v-for="(college, index) in awardRankings" :key="index" :class="{ 'top-three': index < 3 }">
              <span class="icon">🏆</span>
              {{ index + 1 }}. {{ college.name }}: {{ college.awards }} 个奖项
              <div class="time-right">
                <span right>2024-11-10 01:06</span>
              </div>

              <ul>
                <li v-for="award in college.awardDetails" :key="award">{{ award }}</li>
              </ul>
            </li>
          </ul>

        </div>
      </div>
      <!-- 周下载排行和热词排行榜 -->

      <!-- 周下载排行 -->
      <!-- <div class="ranking-card">
        <h3>周下载排行</h3>
        <ul>
          <li v-for="paper in topDownloadedPapers" :key="paper.id">
            {{ paper.title }} ({{ paper.downloadCount }} 次下载)
          </li>
        </ul>
      </div> -->

      <!-- 热词排行榜 -->
      <!-- <div class="ranking-card1">
        <h3>热词排行榜</h3>
        <ul>
          <li v-for="keyword in hotKeywords" :key="keyword.keyword">
            {{ keyword.keyword }} ({{ keyword.count }} 次)
          </li>
        </ul>
      </div> -->

    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';

// 假设的数据
const paperRankings = ref([
  { name: '信息工程学院', papers: 50 },
  { name: '电子工程学院', papers: 45 },
  { name: '计算机科学学院', papers: 40 },
  { name: '商务管理学院', papers: 34 },
  { name: '马克思主义学院', papers: 24 },
  { name: '智能制造学院', papers: 24 },
  { name: '机器人工程学院', papers: 24 },
  { name: '畜牧与烹饪学院', papers: 24 },
  { name: '林学院', papers: 22 },
  { name: '医学院', papers: 22 },
  { name: '农学院', papers: 21 },
  // 可以继续添加更多学院数据
]);

const awardRankings = ref([
  { name: '计算机科学学院', awards: 63 },
  { name: '电子工程学院', awards: 62 },
  { name: '管理学院', awards: 52 },
  { name: '林学院', awards: 22 },
  { name: '医学院', awards: 22 },
  { name: '农学院', awards: 21 },
  // 可以继续添加更多学院数据
]);
const hotKeywords = ref([
  { keyword: '人工智能', count: 50 },
  { keyword: '区块链', count: 30 },
  { keyword: '供应链管理', count: 20 },
  { keyword: '大数据', count: 15 },
  { keyword: '云计算', count: 25 },
  { keyword: '物联网', count: 18 },
  // 更多热词...
]);

const topDownloadedPapers = ref([
  { id: 1, title: '人工智能在医疗领域的应用', downloadCount: 120 },
  { id: 2, title: '区块链技术的发展与挑战', downloadCount: 95 },
  { id: 3, title: '现代供应链管理策略', downloadCount: 80 },
  { id: 4, title: '大数据时代的信息安全', downloadCount: 65 },
  { id: 5, title: '云计算服务的优化与创新', downloadCount: 55 },
  // 更多下载排行数据...
]); 
</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  background-color: #a5c5cd;
}

.sidebar,
.content {
  width: 50%;
  padding: 20px;
}

h2 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

.icon {
  margin-right: 5px;
}

.time-right {
  float: right;
  /* 使时间显示在右侧 */
  color: #888;
  /* 可以根据需要调整颜色 */
}

.top-three {
  font-size: 1.0em;
  color: #3498db;
  /* 蓝色 */
}

.top-three:nth-child(1) {
  color: #e74c3c;
  /* 红色 */
}

.top-three:nth-child(2) {
  color: #2ecc71;
  /* 绿色 */
}

.top-three:nth-child(3) {
  color: #9b59b6;
  /* 紫色 */
}

main {

  display: flex;
  flex-wrap: nowrap;
  height: calc(100vh - 60px);
  box-sizing: border-box;
}

.phb-content {
  display: flex;
  padding: 20px 20px 20px 30px;
}

.phb-con-bj {
  width: 450px;
}

.phb-con-title {
  height: 50px;
  text-align: center;
}

.phb-con-ul {
  height: 365px;
  background-color: #f6f9fe;
  overflow: hidden;
  font-size: 15px;
  padding: 20px;
}

.phb-con-right {
  margin-left: 20px;
  width: 450px;
}

.logo {
  height: 40px;

}

.nav ul {
  list-style: none;
  padding: 0;
}

.nav li {
  display: inline-block;
  margin-right: 1rem;
}

.nav a {
  text-decoration: none;
  color: #333;
}

.content {
  width: 70%;
  padding: 20px;
  box-sizing: border-box;
}


.left-column,
.right-column {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

.left-column {
  border-right: 1px solid #ddd;
}

.sidebar {
  width: 30%;
  background-color: #f4f4f4;
  padding: 20px;
  box-sizing: border-box;
}



ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

li ul {
  padding-left: 20px;
}

.ranking-card {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  z-index: 10;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  /* 如果内容超出，显示滚动条 */
}


.ranking-card h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

/* 让周下载排行在右侧顶部 */
.ranking-card:first-of-type {
  right: 20px;
}

/* 让热词排行榜在右侧中间 */
.ranking-card1:last-of-type {
  right: 240px;
  /* 根据第一个卡片的宽度加上一定的间隔 */
}
</style>
